<template>
	<view class="about-me-wrap">
		<eui-nav-bar title="功能介绍" color="#000000" backgroundColor="#ffffff" rightIcon="" />
		<view class="content" :style="{height: Height + 'px'}" >
				<scroll-view 
					scroll-y 
					:style="{'max-height': scrollHeight + 'px'}" 
					@refresherrefresh="onRefresh" 
					@scrolltolower="templateLower"
					:refresher-enabled='true' 
					:refresher-triggered="triggered"
					refresher-background="white"
					refresher-default-style="white"
				>
				<eui-base-card class="card-box">
					<view v-for="(item, index) in dataList" :key="index" class="row-item" @click="openDetail(item)">
						<view class="label">
							{{item.c_type}} {{item.c_version}} 主要更新
							<text v-if="index == 0">(当前)</text>
						</view>
						<view class="dt">{{item.c_create_dt}}</view>
					</view>
				</eui-base-card>
				</scroll-view>
		</view>
	</view>
</template>

<script setup type="ts">
	import {storeToRefs} from 'pinia'
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import { ref } from 'vue'
	import service from '../../../common/service';
	import { useSystemInfoStore } from '@/store/useSystemInfo';
	import { useLoginStore } from '../../../store/modules/useLoginStore';
	const systemInfo= useSystemInfoStore(); // 系统参数
	const LoginStore = useLoginStore();
	const scrollHeight = ref(0);
	const Height = ref(0);
	const triggered = ref(false);
	const PageSize = ref(20); //第几页
	const CurrentPage = ref(1); // 当前页
	const PageCount = ref(1); // 总条数
	const dataList = ref([])
	// 初始化滚动区域高度
	const initScrollView =() => {
		Height.value = systemInfo.systemInfo.windowHeight - systemInfo.systemInfo.statusBarHeight - systemInfo.navBarHeight;
		scrollHeight.value = Height.value - (uni.upx2px(60));
	}

	const GetAppVersions = () => {
		service.enjoyShowLoading('正在加载...');
		let request = {
		    url: LoginStore.EnjoyMain,
		    data: {
		        UniqueKey: "管易通40公共",
		        ObjectData:  {
					IsNotPage: false,
					PageSize: PageSize.value,
					CurrentPage: CurrentPage.value,
				},
		        MethodName: "GetAppVersions",
		    },
		}
		service.request(request, (res) => {
		    if (res && res.data) {
				if (!res.data.HasException) {
					var _data = res.data.ObjectData;

					CurrentPage.value = _data.CurrentPage;
					PageCount.value = _data.PageCount;
					PageSize.value = _data.PageSize;
					if (_data.ReturnObject.length > 0) {
						dataList.value = [...dataList.value, ..._data.ReturnObject];
					} else {
						dataList.value = [];
					}
				} else {
					service.enjoyShowToast(res.data.Exception.Message)
				}
				service.enjoyHideLoading();
		    }
			service.enjoyHideLoading();
		}, () => {
			service.enjoyHideLoading();
		});
	}
	
	const openDetail = (item) => {
		let data = encodeURIComponent(JSON.stringify(item));
		uni.navigateTo({
		  	url: `/pages/MainViews/main/UpdateLog?data=[${data}]&isUpdate=false`,
		});
	}

	// 下拉刷新
	const onRefresh = () => {
		if (triggered.value) {
			return false;
		};
		triggered.value = true;
		CurrentPage.value = 1;
		dataList.value = [];
		GetAppVersions();
		
		setTimeout(() => {
			triggered.value = false;
		}, 1000)
	}
	// 加载更多
	const templateLower = () => {
		if (CurrentPage.value < PageCount.value) {
			CurrentPage.value = CurrentPage.value + 1;
			GetAppVersions();
		}
	}

	onShow(() => {
		initScrollView()
	});
	onLoad(()=>{
		GetAppVersions();
	})
</script>

<style lang="scss" scoped>
.about-me-wrap {
	height: 100%;
	width: 100%;
	background-color: $enjoy-bg-color;
}

.content {
	padding: 20rpx;
	margin-bottom: env(safe-area-inset-bottom);
	box-sizing: border-box;
	::v-deep .card-box {
		box-sizing: border-box;
		.row-item {
			padding: 20rpx 0 12rpx;
			border-bottom: 1px solid #EEEEEE;
			&:last-child {
				border-bottom: none;
			}
		}
	}
	::v-deep .e-card__content {
		margin-bottom: 0 !important;
	}
	::v-deep .uni-scroll-view {
		border-radius: 20rpx;
	}
}


.label {
	font-family: PingFangSC, PingFang SC;
	font-weight: 600;
	font-size: 28rpx;
	color: #000000;
	margin-bottom: 4rpx;
}
.dt {
	font-family: PingFangSC, PingFang SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #888888;
}
</style>